<script module lang="ts">
    import { defineMeta } from "@storybook/addon-svelte-csf";
    import LoadingBar from "./LoadingBar.svelte";
    import { fn } from "storybook/test";
    import { Space } from "../Space";
    import { Button } from "../Button";
    import { loadingBar } from ".";

    const { Story } = defineMeta({
        title: "Components/Navigation/LoadingBar",
        component: LoadingBar,
        tags: ["autodocs"],
        argTypes: {},
        args: {},
    });
</script>

<Story name="Default">
    {#snippet template(args)}
        <Space dir="h">
            <Button
                type="primary"
                onclick={() => {
                    loadingBar.start();
                }}>开始</Button
            >
            <Button
                type="primary"
                onclick={() => {
                    loadingBar.finish();
                }}>结束</Button
            >
            <Button
                type="primary"
                onclick={() => {
                    loadingBar.error();
                }}>错误</Button
            >
        </Space>
    {/snippet}
</Story>
